import { useEffect, useState } from "react";
import "./index.less";
import { dataSource } from "./config";  
import  MyTable  from "./Table";
import {
  Form, Input, Button, Modal, Space, Popconfirm, Select, Radio, Switch,
  InputNumber,Flex
} from "antd";
import MyForm from "../components/form";
import dayjs from 'dayjs';

function RegistrationForm() {
  const [searchForm] = Form.useForm();
  const [formData, setFormData] = useState<object>({});
  const [showModal, setShow] = useState(false);
  // 使用 useState 钩子来管理 data 的状态
  const [data, setData] = useState<any[]>(dataSource);
  
  // 表格列配置
  const columns = [
    {
      title: '序号',
      width: 80,
      render:(text,record,index)=> `${index+1}`,
    },
    {title: '姓名',dataIndex: 'name',key: 'name'},
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 80,
      sorter: (a, b) => a.age - b.age,
    },
    {title: '电话',dataIndex: 'phone',key: 'phone'},
    {title: '邮件',dataIndex: 'email',key: 'email'},
    {title: '生日',dataIndex: 'birthday',key: 'birthday'},
    {title: '性别',dataIndex: 'sex',key: 'sex'},
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
      sorter: (a, b) => a.address - b.address,
    },
    {title: '学历',dataIndex: 'education',key: 'education'},
    {title: '工作',dataIndex: 'job',key: 'job'},
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      sorter: (a, b) => moment(a.time).unix() - moment(b.time).unix(),
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record)}>修改</a>
          <a>查看</a>
          <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.key)}>
              <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    }
  ];


  // 表单配置
  const formItem = [
    { label: '姓名', name: 'name',itemType:'input', rules: [{ required: true, message: '请输入姓名' }] },
    { label: '年龄', name: 'age', itemType:'inputNumber', rules: [{ required: true, message: '请输入年龄' }] },
    { label: '电话', name: 'phone',itemType:'input', rules: [{ required: true, message: '请输入电话' }] },
    { label: '邮件', name: 'email',itemType:'input', rules: [{ required: true, message: '请输入邮件' }] },
    { label: '生日', name: 'birthday',itemType:'datePicker',getValueProps:true,normalize:true, rules: [{ required: true, message: '请输入生日' }] },
    { label: '性别', name: 'sex',itemType:'radio',dict:[ { label: '男', value: '男' }, { label: '女', value: '女' }], rules: [{ required: true, message: '请输入性别' }] },
    { label: '住址', name: 'address',itemType:'input', rules: [{ required: true, message: '请输入住址' }] },
    { label: '学历', name: 'education',itemType:'select',dict:[ { label: '小学', value: '小学' }, { label: '初中', value: '初中' }, { label: '高中', value: '高中' }, { label: '大专', value: '大专' }, { label: '本科', value: '本科' }, { label: '硕士', value: '硕士' }, { label: '博士', value: '博士' }] , rules: [{ required: true, message: '请输入学历' }] },
    { label: '工作', name: 'job',itemType:'input', rules: [{ required: true, message: '请输入工作' }] },
    { label: '时间', name: 'time',itemType:'datePicker',getValueProps:true,normalize:true, rules: [{ required: true, message: '请输入时间' }] },
  ]
  
  useEffect(() => {
    
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  const handleDelete = (key: string) => {
    console.log(key);
    
  }
  //编辑
  const handleEdit = (row: any) => {
    setFormData(row);
    setShow(true)
  }
  
  // 搜索
  const search = () => {
    const dataList  = dataSource.filter((item:any) => {
      let { name, age } = searchForm.getFieldsValue();
       if (name && age) {
         return item.name.includes(name) && item.age.toString().includes(age);
       }else if (age) {
         return item.age.toString().includes(age);
       }else if (name) {
         return item.name.includes(name);
       }else {
         return item;
       }
     })
    setData(dataList)
   
  };
  const addList = () => {
    
  };

  const close = () => {
    setShow(false)
    // setData(dataSource)
  };
  const type = "checkbox"
  return (
    <div>
      <div className="top-form">
      <Form layout="inline" form={searchForm}>
        <Form.Item name="name" label="姓名">
          <Input placeholder="输入姓名" />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <Input placeholder="输入年龄" />
        </Form.Item>
        <Button onClick={search} type="primary" className="submit-btn">
          搜索
        </Button>
        <Button
          onClick={() => {
            searchForm.resetFields();
            search();
          }}
        >
          清空
        </Button>
      </Form>
      </div>
      <MyTable dataSource={data} columns={columns} type={type} />
      <Modal
        title="修改"
        open={showModal}
        cancelText="取消"
        okText="确定"
        onOk={() => addList()}
        onCancel={close}
        width={1000}
      >
        <MyForm formData={formData} formItem={formItem} />
      </Modal>
    </div>
  );
}

export default RegistrationForm;

RegistrationForm.route = {
  [MENU_PATH]: "/assessment/index",
};
